<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    
</body>
<script>
    function MyEvent(){
        // 用于记录将来事件和事件处理函数的消息队列：
            // 多个事件，每个事件的事件名绝对不一样：
                // {事件名作为键名：？值}
            // 每个事件对应多个事件处理函数：
                // [多个事件处理函数]
            // 最终message数据的结构为：
                // {事件名作为键名：[多个事件处理函数]}
        this.message = {};
        // 添加事件功能
        this.add = function(type, cb){
            if(this.message[type]){
                this.message[type].push(cb);
            }else{
                this.message[type] = [cb];
            }
        }
        // 删除事件功能
        this.remove = function(type, cb){
            if(!this.message[type]) return;
            let i = 0;
            const flag = this.message[type].some((val, idx)=>{
                i = idx;
                return val === cb;
            })
            if(flag){
                this.message[type].splice(i, 1)
            }
        }
        // 触发事件功能
        this.emit = function(type){
            if(!this.message[type]) return;
            this.message[type].forEach(val=>{
                val();
            })
        }
    }

    const myevent = new MyEvent();
    
    // 添加事件（添加订阅）
    myevent.add("a", fn1);
    myevent.add("a", fn2);
    myevent.add("c", fn4);
    myevent.add("c", fn6);
    myevent.add("q", fn1);
    myevent.add("q", fn3);
    myevent.add("q", fn5);
    myevent.add("w", fn2);
    // 删除事件（取消订阅）
    myevent.remove("c", fn4)
    myevent.remove("a", fn2)
    myevent.remove("q", fn3)
    myevent.remove("x", fn3)
    // 触发事件（发布信息）
    myevent.emit("a");
    myevent.emit("c");
    myevent.emit("q");

    // 查看自定义事件系统中的消息队列
    console.log(myevent.message);

    function fn1(){
        console.log(1)
    }
    function fn2(){
        console.log(2)
    }
    function fn3(){
        console.log(3)
    }
    function fn4(){
        console.log(4)
    }
    function fn5(){
        console.log(5)
    }
    function fn6(){
        console.log(6)
    }
</script>
</html>